<template>
  <a-form :model="config" :labelCol="{span: 4}" :rules="rules" ref="formRef">
    <a-form-item label="url" required name="url">
      <a-input-group compact>
        <a-select style="width:20%" size="small" v-model:value="config.method" @change="methodChange">
          <a-select-option value="get">get</a-select-option>
          <a-select-option value="post">post</a-select-option>
        </a-select>
        <a-input style="width: 80%" size="small" placeholder="https:// || http://" v-model:value="config.url" />
      </a-input-group>
    </a-form-item>

    <div v-if="config.method === 'get'">
      <a-form-item v-for="(item, i) in config.query" :validateStatus="rulesQuery[i] ? rulesQuery[i].validateStatus : ''" :help="rulesQuery[i] ? rulesQuery[i].help : ''"
                  :label="i === 0 ? 'query' : '-'" 
                  style="margin-bottom:0px"
                  :key="i + '-' + uuid()">
        <a-input-group>
          <a-input style="width:30%" size="small" v-model:value="item.key" placeholder="key" />
          <a-input style="width:60%" size="small" v-model:value="item.value" placeholder="value" />
          <DeleteOutlined style="margin-left:5px" @click="del('query', i)"/>
        </a-input-group>
      </a-form-item>
      <a-form-item :wrapper-col="config.query.length && {offset: 4 }" :label="config.query.length ? '' : 'query'">
        <a-button type="primary" ghost size="small" @click="add('query')">+添加query</a-button>
      </a-form-item>
    </div>

    <div v-if="config.method === 'post'">
      <a-form-item :label="i === 0 ? 'bodyData' : '-'" :validateStatus="rulesData[i] ? rulesData[i].validateStatus : ''" :help="rulesData[i] ? rulesData[i].help : ''"
                    v-for="(item, i) in config.data"
                    :key="i + '-' + uuid()"
                    style="margin-bottom:0px">
        <a-input-group >
          <a-input style="width:30%" size="small" v-model:value="item.key" placeholder="key" />
          <a-input style="width:60%" size="small" v-model:value="item.value" placeholder="value" />
          <DeleteOutlined style="margin-left:5px" @click="del('data', i)"/>
        </a-input-group>
      </a-form-item>
      <a-form-item :wrapper-col="config.data.length && {offset: 4 }" :label="config.data.length ? '' : 'bodyData'">
        <a-button type="primary" ghost size="small" @click="add('data')">+添加bodyData</a-button>
      </a-form-item>
    </div>
    
    <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button type="primary" @click="change()">测试api</a-button>
    </a-form-item>

  </a-form>
</template>
<script>
import { DeleteOutlined } from '@ant-design/icons-vue';

export default {
  components: { DeleteOutlined },
  props: {
    // 数据源配置
    apiConfig: {
      type: Object,
    },
  },
  data () {
    return {
      rules: {
        url: [{ required: true, message: '请输入api地址', trigger: 'change' }]
      },

      config: {
        url: '',
        method: 'get',
        data: [],
        query: []
      },

      rulesQuery: [],
      rulesData: []
    }
  },
  created() {
    console.log(this.$route)
  },
  methods: {
    uuid () {
      return new Date().getTime()
    },

    // 验证
    verification () {
      return new Promise((resolve, reject) => {
        let queryList = [], dataList = []
        this.config.query.forEach(o => {
          if (!o.key || !o.value) {
            queryList.push({
              validateStatus: 'error',
              help: '请完善参数信息'
            })
          }
        })

        this.config.data.forEach(o => {
          if (!o.key || !o.value) {
            dataList.push({
              validateStatus: 'error',
              help: '请完善参数信息'
            })
          }
        })

        this.rulesQuery = queryList
        this.rulesData = dataList

        this.$refs.formRef.validate().then(() => {
          if (!this.rulesQuery.length) {
            resolve()
          }
        })
      })
    },

    methodChange () {
      this.config.data = []
      this.config.query = []
    },

    add (key) {
      this.config[key].push({
        key: '',
        value: ''
      })
    },

    del (key, i) {
      this.config[key].splice(i, 1)
    },

    change () {
      this.verification().then(() => {
        this.$emit('api-change', this.config)
      })
    }
  }
}
</script>